Badges Guidelines 徽章指導規則

Usage  用法

徽章用於指示通知、專案計數或其他與導航目的地相關的資訊，通常放置在元素的結束邊緣，通常巢狀在其他元件內。

徽章型別（Types of Badges）

  1. 小徽章（Small Badge）：簡單的圓點，僅用於指示狀態更改或新通知。
  1. 大徽章（Large Badge）：包含文字標籤，用於顯示與導航目的地相關的可量化狀態變更。

With other components  與其他元件配合使用

徽章通常巢狀在導航欄（Navigation Bar）、導航軌道（Navigation Rail）、應用欄（App Bars）等元件內。當使用者訪問某個目的地後，導航欄中的徽章應隱藏，避免不必要的視覺干擾。

Anatomy 結構

1 Small badge 2 Large badge container 3 Large badge label

徽章容器固定在圖示邊界框內，寬度隨數字增大而變化，高度固定。徽章採用強調色以確保與其他元素有足夠對比度。

✓ 在右到左（RTL）語言佈局中，調整徽章的方向。
× 不應隨意調整徽章的位置或直接覆蓋在圖示上。
✓ 使用預設顏色
× 避免為徽章容器和標籤文字使用自定義顏色對映。這可能無法滿足無障礙訪問需求。

Label text  標籤文字

大徽章可包含計數或狀態文字，最大字元數應限制為4個字元（如 "99+" 表示更高計數）。

✓ 徽章文字應遵循容器大小
× 不應超出徽章邊界

Placement  放置位置

✓ 使用大徽章 在導航抽屜（Navigation Drawer）等不會導致視覺衝突的區域來顯示計數資訊。
✓ 在空間受限（如頂部應用欄）時，使用小徽章，避免徽章超出螢幕邊界。
✓ 將徽章放置在鎖定佈局（Lockup）的結束邊緣，以避免視覺衝突。
× 避免在可能與其他元素重疊的地方使用大徽章。如果有可能重疊，應將徽章放置在鎖定佈局的結束邊緣，或者改用小徽章。

Interaction & style  互動與樣式

徽章最常用於其他元件中，如導航欄、導航側邊欄、頂部應用欄和標籤。當徽章用於指示未讀通知時，一旦選中，徽章就會隱藏。